<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{ web.show }}</h2>

  <p v-show="web.show">浙江工贸职业技术学院</p>
  <p v-if="web.show">www.zjitc.net</p>

  <button @click="toggle">点击切换显示状态</button>

  <p v-if="web.user < 100">新网站</p>
  <p v-else-if="web.user >= 100 && web.user < 1000">优秀网站</p>
  <p v-else-if="web.user >= 1000 && web.user < 10000">资深网站</p>
  <p>超级网站</p>

</div>
<script type="module">
  import {createApp,reactive,ref} from "./vue.esm-browser.js";

  createApp({
    setup(){
      const web = reactive({
        show: true,
        user: 500
      })

     const toggle = ()=>{
        web.show = !web.show
     }
     return{
        web,
        toggle
      }
    }
  }).mount("#app")
</script>
</body>
</html>